<template>
	<view class="user-edit">
		<nav-bar lefticon="iconfont icon-2fanhui" :middlebar="titleheader">
			<template slot="right-click">
				<view class="mr-2">
					删除
				</view>
			</template>
		</nav-bar>
		
		
		<view class="d-flex a-center border-bottom p-2 bg-white">
			<view class="font-md mr-1 text-secondary">收货人:</view>
			<input type="text" class="flex-1 px-1 font-md"  v-model="form.name" />
		</view>
		
		<view class="p-2 d-flex a-center bg-white border-bottom">
			<view class="font-md text-secondary mr-1 flex-shrink">
				手机号码：</view>
			<input class="px-1 font-md flex-1" type="text"  v-model="form.phone" />
		</view>
		
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				邮编：</view>
			<input class="px-1 font-md flex-1" type="text" 
			v-model="form.zip" />
		</view>
		<divider></divider>
		<view class="p-2 border-bottom d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				所在地区：</view>
			<input class="px-1 font-md flex-1"  disabled type="text" placeholder="请选择所在地区" :value="path" @click="showMulLinkageThreePicker" />
			
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="pickerValue" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
		<view class="p-2 d-flex a-center bg-white">
			<view class="font-md text-secondary mr-1 flex-shrink">
				详细地址：</view>
			<input class="px-1 font-md flex-1" type="text" v-model="form.address" />
		</view>
		
		<divider></divider>
		
		<view class="d-flex a-center bg-white p-2">
			<view class="font-md text-secondary mr-1 flex-shrink">
				默认地址：</view>
			<switch class="ml-auto" color="#FD6801" :checked="form.default"  @change="form.default = $event.detail.value ? 1 : 0" />
		</view>
		
		<view class="p-2">
			<button  @click="submit" type="default">保存</button>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/common/nav-bar.vue"
	import mpvueCityPicker from "@/components/ui-mpvue-citypicker/mpvueCityPicker.vue"
	import {mapState,mapMutations,mapActions} from "vuex"
	export default {
		data() {
			return {
				form:{
					user_id:"",
					zip:"",
					name:"",
					province:"",
					city:"",
					district:"",
					address:"",
					phone:"",
					default:0
				},
				isedit:false,
				themeColor: '#007AFF',
				pickerValue: [0, 0, 1],
				index:-1,
				titleheader:'添加收货地址'
			}
		},
		onLoad(e) {
			if(e.userID){
				this.form.user_id = e.userID
				this.isedit = false
			}else if(e.data){
				let result = JSON.parse(e.data);
				this.form = result.item
				this.index = result.index
				this.isedit = true
				// uni.setNavigationBarTitle({
				// 	title:"修改收货地址"
				// })
				this.titleheader = "修改收货地址"
			}
		},
		components:{navBar,mpvueCityPicker},
		computed:{
			path(){
				if (this.form.province) {
					return this.form.province+'-'+this.form.city+'-'+this.form.district
				}
			}
		},
		methods: {
			...mapMutations([
				'createPath'
			]),
			...mapActions([
				'createPathAction',
				'updatePathAction'
			]),
			submit(){
				console.log(this.isedit)
				if(this.isedit){
					//修改用户地址
					this.$H.post('/useraddress/edit',this.form,{
						token:true
					}).then(res=>{
						this.updatePathAction({
							index:this.index,
							item:this.form
						})
						uni.showToast({ title: '修改成功' });
						uni.navigateBack({ delta: 1 })
					})
				}
				
				
				if(this.isedit===false){
					//添加用户地址
					this.$H.post('/useraddress/add',this.form,{
						token:true
					}).then(res=>{
						if(res.code === 200){
							this.createPathAction(this.form)
							uni.showToast({
								title: '创建成功'
							});
							uni.navigateBack({
								delta: 1
							});
						}
					})
				}
			},
			onConfirm(e){
				let arr = e.label.split('-')
				this.form.province = arr[0]
				this.form.city = arr[1]
				this.form.district = arr[2]
				this.pickerValue = e.value
			},
			// 显示三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			}
		}
	}
</script>

<style lang="scss">
	.user_edit{
		uni-button{
			background:#FD6801 !important;
		}
	}
</style>
